<template>
  <div class="box" v-show="visiable">
    <header class="header" ref="header">
      <template v-if="$slots.title">
        <slot name="title"></slot>
      </template>
      <template v-else>
        {{ title }}
      </template>

      <template v-if="$slots.close">
        <span class="close" @click="close"><slot name="close"></slot></span>
      </template>
      <template v-else>
        <i class="el-icon-close close" @click="close"></i>
      </template>
    </header>
    <div class="content">
      <template v-if="$slots.default">
        <slot></slot>
      </template>
      <template v-if="!$slots.default">
        <span>这是一段提示信息，划过去吧</span>
      </template>
    </div>
    <template v-if="$slots.footer">
      <slot name="footer"></slot>
    </template>
    <template v-else>
      <div style="text-align: right; line-height: 50px; height: 50px">
        <el-button size="small" @click="close">取消</el-button>
        <el-button type="primary" size="small" @click="close">确定</el-button>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  //自定义v-model的属性
  model: {
    prop: "visiable",
    event: "change",
  },
  props: {
    visiable: {
      type: Boolean,
      required: true,
      default: true,
    },
    title: {
      type: String,
      default: "提示信息",
    },
  },
  mounted() {},
  methods: {
    close() {
      this.$emit("change", false);
    },
  },
  watch: {
    visiable(newVal) {
      if (!newVal) {
        this.$emit("close");
      } else {
        this.$emit("open");
      }
    },
  },
};
</script>
<style scoped lang="less">
.box {
  position: absolute;
  width: 500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  padding: 5px 15px;
  box-sizing: border-box;
  .header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: 800;
    position: relative;
  }
  .header .close {
    position: absolute;
    right: 0px;
    top: 5px;
    font-weight: 600;
    font-size: 20px;
    cursor: pointer;
  }

  .content {
    min-height: 200px;
    margin-top: 30px;
  }
}
</style>
